//1装包 yarn add vue-router@3.5.3
//2引入到main.js
import VueRouter from 'vue-router'
import Vue from 'vue'
// 引入组件对象
import Find from '../views/Find.vue'
import My from '../views/My.vue'
import Part from '../views/Part.vue'
import NotFound from'../views/NotFound.vue'

// 3. 安装 VueRouter 插件, Vue.use()
// 自动注册 router-view 组件
Vue.use(VueRouter)

// 4. 创建路由对象
// 核心步骤1: 配置路由规则
const routes=[
 // 一个对象表示一条路由规则, 路由就是路径和组件的映射关系
  // {
  //   // 路径
  //   path: '',
  //   // 组件
  //   component: 组件对象
  // }
  {
  path:'/',
  redirect:'/find'
  },
  {
    // 路径
    path: '/find',
    // 组件
    component: Find,name:'find'
  },

  {
    // 路径
    path: '/my',
    // 组件
    component: My,name:'my'
  },
  {
    // 路径
    path: '/part',
    // 组件
    component: Part,name:'part'
  },
  {
    //*是通配符 匹配任意路径
    path:'*',
    component: NotFound 
  }
]
const router =new VueRouter({
  // 可以配置路由信息
  routes,
  // linkActiveClass: 'active',
  // linkExactActiveClass: 'e-active',
  // # 就是 hash 模式
  // 没有 # 就是 history 模式, 使用的是 H5 的 history.pushState API (可以做到不刷新页面, 切换路径)
  // 如果要使用 hisotry 模式, 必须要后端程序员的配合
  // 面试题: 请说一下路由的模式, 有什么区别?
  mode: 'history'
})
//默认导出
export default router
